<template>
	<view class="box">
		<view class="head">

<!--      <view @click="lookback()">
        <img style="width: 100%; margin-top: 10px; border-radius: 10px; box-shadow: rgb(214 211 211) 0px 0px 20px 2px;"
             src="https://honor-hall.oss-cn-chengdu.aliyuncs.com/rongyaowxapp/1742888571977.png" mode="widthFix" />
      </view>-->

			<view class="tab">
				<up-tabs :list="activityTabs" :current="currTab" :line-width="rpx2px(72)"
					:lineColor="'#00B588'" :line-height="rpx2px(9)" :itemStyle="activityTabStyle"
					@change="handleTab" :activeStyle="{ color: '#303133', fontWeight: 'bold', transform: 'scale(1.05)'}"/>
			</view>
			<view class="search">
				<up-input placeholder="请输入内容" suffixIcon="search" suffixIconStyle="color: #909399" :font-size="rpx2px(23)"
				shape="circle" v-model="params.content" @change="searchChange" />
			</view>
			<!-- <view class="banner">
				<image src="https://appointment-1312289777.cos.ap-chengdu.myqcloud.com/1733578877392.png" mode="widthFix"></image>
			</view> -->
		</view>

    <view v-if="currTab===0" class="main">
      <view class="tab_1">
        <view class="label_1" :class="currLabel2===0?'active':''" @click="handleLabel2(0)">投票活动</view>
        <view class="label_1" :class="currLabel2===1?'active':''" @click="handleLabel2(1)">我的投票</view>
        <view class="indicator_1" :style="'left:'+(50*currLabel2)+'%;'"></view>
      </view>
      <view class="list_1" >
        <view v-if="vActivityList.length>0" class="item_1" v-for="(item, index) in vActivityList" :key="item.id" @click="onClickVote(item)">
          <view class="l">
            <view class="title">{{item.activityName}}</view>
            <view class="time">
              <image src="https://honor-hall.oss-cn-chengdu.aliyuncs.com/time.png" mode="aspectFill"></image>{{item.activityStartTime.slice(0,10).replace(/-/g,'.')}}-{{item.activityEndTime.slice(0,10).replace(/-/g,'.')}}
            </view>
            <template v-if="currLabel2===0">
              <view v-if="item.activityStatus===0" class="btn">未开始</view>
              <view v-if="item.activityStatus===1" class="btn bin">进行中</view>
              <view v-if="item.activityStatus===2" class="btn bout">已结束</view>
            </template>
            <template v-else>
              <!-- <view v-if="item.userActivityVoteStatus===1" class="btn bin">已投票</view>
              <view v-if="item.userActivityVoteStatus===0" class="btn bout">未投票</view> -->
              <view v-if="item.activityStatus===2" class="btn bout">已结束</view>
              <view v-else class="btn bin">已参与</view>
            </template>

          </view>
          <view class="r">
            <image :src="item.activityPoster" mode="aspectFill"></image>
          </view>
        </view>
        <none-data v-else />
      </view>
    </view>

		<view v-if="currTab===1" class="main">
			<view class="tab">
				<view class="label" :class="currLabel===0?'active':''" @click="handleLabel(0)">未开始</view>
				<view class="label" :class="currLabel===1?'active':''" @click="handleLabel(1)">进行中</view>
				<view class="label" :class="currLabel===2?'active':''" @click="handleLabel(2)">已结束</view>
				<view class="label" :class="currLabel===3?'active':''" @click="handleLabel(3)">已报名</view>
				<view class="indicator" :style="'left:'+(25*currLabel)+'%;'"></view>
			</view>

			<view class="list_1">
<!--				<up-list v-if="activityList.length !== 0" @scrolltolower="scrollToLower">
					<up-list-item v-for="(activity, index) in activityList" :key="index">
						<activity-item :activity-item="activity" @tap="handleClick(activity)" />
					</up-list-item>
				</up-list>-->

        <view v-if="activityList.length !== 0" class="item_1" v-for="(item, index) in activityList" :key="item.id" @click="handleClick(item)">
          <view class="l">
            <view class="title">{{item.activityName}}</view>
            <view class="time">
              <image src="https://honor-hall.oss-cn-chengdu.aliyuncs.com/time.png" mode="aspectFill"></image>{{item.activityStartTime.slice(0,10).replace(/-/g,'.')}}-{{item.activityEndTime.slice(0,10).replace(/-/g,'.')}}
            </view>

            <view v-if="new Date(item.activityStartTime).getTime() > new Date().getTime()" class="btn">未开始</view>
            <view v-if="new Date(item.activityStartTime).getTime() < new Date().getTime() && new Date(item.activityEndTime).getTime() > new Date().getTime()" class="btn bin">进行中</view>
            <view v-if="new Date(item.activityEndTime).getTime() < new Date().getTime()" class="btn bout">已结束</view>

          </view>
          <view class="r">
            <image :src="item.activityPoster" mode="aspectFill"></image>
          </view>
        </view>

				<none-data v-else />
			</view>
		</view>

		<view v-if="currTab===2" class="main">
			<view class="tab_1">
				<view class="label_1" :class="currLabel1===0?'active':''" @click="handleLabel1(0)">挑战打卡</view>
				<view class="label_1" :class="currLabel1===1?'active':''" @click="handleLabel1(1)">我的挑战</view>
				<view class="indicator_1" :style="'left:'+(50*currLabel1)+'%;'"></view>
			</view>
			<view class="list_1">
				<view v-if="sActivityList.length>0" class="item_1" v-for="(item,index) in sActivityList" :key="item.id" @click="onClickSign(item)">
					<view class="l">
						<view class="title">{{item.activityName}}</view>
						<view class="time">
							<image src="https://honor-hall.oss-cn-chengdu.aliyuncs.com/time.png" mode="aspectFill"></image>{{item.activityStartTime.slice(0,10).replace(/-/g,'.')}}-{{item.activityEndTime.slice(0,10).replace(/-/g,'.')}}
						</view>
						<template v-if="currLabel1===1">
							<view v-if="item.activityStatus===2" class="btn bout">已结束</view>
							<view v-else class="btn bin">已参与</view>
						</template>
						<template v-else>
							<view v-if="item.activityStatus===0" class="btn">未开始</view>
							<view v-if="item.activityStatus===1" class="btn bin">进行中</view>
							<view v-if="item.activityStatus===2" class="btn bout">已结束</view>
						</template>
					</view>
					<view class="r">
						<image :src="item.activityPoster" mode="aspectFill"></image>
					</view>
				</view>
				<none-data v-else />
			</view>
		</view>

		<view class="foot"></view>
		<!-- 登录弹窗 -->
		<loginDialog @on-off="headelOff" @on-make="headelMake" :indicate="userLoginDialog"> </loginDialog>
	</view>
</template>

<script setup>
import {inject, ref, watch} from "vue";
import { rpx2px } from "../../../utils/utils";
import { getActivityListDataApi,getSignActivityListApi,getVoteActivityListApi, getActivityDetailApi } from "../../../api/activity";
import { onLoad, onReachBottom, onShow } from "@dcloudio/uni-app";
import activityItem from "../../components/activity-item.vue";
import { customNav } from "../../../utils/customNav";
const userLoginInfo = ref("");
const userLoginDialog = ref(false);
function headelOff () {
  userLoginDialog.value = false;
  currTab.value = 0
}
function headelMake () {
  userLoginDialog.value = false;
  userLoginInfo.value = uni.getStorageSync("token");
}
const activityTabStyle = {
  flex: 1,
  fontFamily: "ali-p",
  fontSize: "31rpx",
  height: "80rpx!important",
  justifyContent: "flex-start"
};
const activityTabs = ref([
  { name: "投票活动" },
  { name: "荣耀活动" },
  { name: "挑战活动" }
]);

const activityList = ref([]);
const listTotal = ref(0);
const params = ref({
  content: "",
  limit: 10,
  page: 1,
  type: 0,
});
const querySign = ref({
	content: "",
	limit:10,
	mine:0,
	page:1
})
const sActivityList = ref([])
const sTotal = ref(0)
const queryVote = ref({
	content: "",
	limit:10,
	mine:0,
	page:1
})
const vActivityList = ref([])
const vTotal = ref(0)
// 监视
// watch(currLabel, (v) => {
//   getActivityList();
// });


// 触底加载更多
onReachBottom(() => {
	if (currTab.value===1) {
		if (querySign.value.page * querySign.value.limit < sTotal.value) {//还有更多数据
			querySign.value.page += 1
			getSignActivityData()
		}
	}

	if (currTab.value===2) {
		if (queryVote.value.page * queryVote.value.limit < vTotal.value) {//还有更多数据
			queryVote.value.page += 1
			getVoteActivityData()
		}
	}
})
// -------------------投票活动-------------------
const getVoteActivityData = async () => {
	await uni.showLoading({
	  title: "加载中...",
	});
	const { code, data } = await getVoteActivityListApi(queryVote.value);
	if (code === 200) {
	  uni.hideLoading();

	  vActivityList.value = [...vActivityList.value, ...data.records];

    vActivityList.value = vActivityList.value.filter(e => {
      return e.id !== '1972139920180875265'
    })

	  vTotal.value = data.total;
	}
}
// const handleVoteActivity = () => {
// 	console.log('fetch vote data')
// 	if (queryVote.value.page * queryVote.value.limit > vTotal.value) {//还有更多数据
// 		queryVote.value.page += 1
// 		getVoteActivityData()
// 	}
// }
// ----------------打卡挑战-------------------
const getSignActivityData = async () => {
	await uni.showLoading({
	  title: "加载中...",
	});

	const { code, data } = await getSignActivityListApi(querySign.value);
	if (code === 200) {
	  uni.hideLoading();
	  sActivityList.value = [...sActivityList.value, ...data.records];
	  sTotal.value = data.total;

    getActivityDetailApi('1972139920180875265').then((e) => {
      let aData = e.data
      let now = new Date()
      let stime = new Date(aData.activityStartTime)
      let etime = new Date(aData.activityEndTime)
      if(now < stime) {
        aData.activityStatus = 0
      }
      if(now > stime && now < etime) {
        aData.activityStatus = 1
      }
      if(now > etime) {
        aData.activityStatus = 2
      }
      sActivityList.value.unshift(aData)
    })

	}
}

// 搜索
const searchChange = (value) => {
	if (currTab.value===1) {
		querySign.value.page = 1
		querySign.value.content = value
		sActivityList.value = []
		getSignActivityData()
	} else if(currTab.value===2){
		queryVote.value.page = 1
		queryVote.value.content = value
		vActivityList.value = []
		getVoteActivityData()
	} else {
		params.value.page = 1;
		params.value.content = value;
		activityList.value = []
		getActivityList();
	}
}
// ----------------荣耀活动-------------------
const handleClick = (activity) => {
  customNav(`../activity-detail?id=${activity.id}`);
};
const getActivityList = async () => {
  await uni.showLoading({
    title: "加载中...",
  });
  const res = await getActivityListDataApi(params.value);
  const { code, data } = res;
  if (code === 200) {
    uni.hideLoading();
    activityList.value = [...activityList.value, ...data.records];
    listTotal.value = data.total;
  }
};
const onClick = () => {
	uni.navigateTo({
		url:'./activity-in'
	})
}

const packageActivityPath = inject("packageActivityPath");
const onClickSign = (row) => {
	console.log('join sign statu----------',row.userJoinActivityStatus)
  if(row.id === '1972139920180875265') {
    uni.navigateTo({
      url:`./activity-vote?id=${row.id}`
    })
  } else if (currLabel1.value===1 || row.userJoinActivityStatus) {
    console.log(111111111111)
		/*uni.navigateTo({
			url:`./activity-progress?id=${row.id}`
		})*/

    uni.navigateTo({
      url:`${packageActivityPath}/activity-detail?isVote=1&id=${row.id}`
    })
	} else {
		uni.navigateTo({
			url:`./activity-user-info?id=${row.id}`
		})
	}
}
const onClickVote = (row) => {
	console.log('join vote status--------------',row.userActivityVoteStatus)
	if (currLabel2.value===1 || row.userActivityVoteStatus>0) {
		uni.navigateTo({
			url:`./activity-vote?id=${row.id}`
		})
	} else {
		uni.navigateTo({
			url:`./activity-user-info?isVote=1&id=${row.id}`
		})
	}

}

const currTab = ref(2)
const handleTab = (v) => {
	currTab.value = v.index
	if (v.index===0) {
		currLabel.value = 0
		activityList.value = []
		params.value = {content: "", limit: 10, page: 1, type: 0}
		getActivityList()

    currLabel2.value = 0
    vActivityList.value = []
    queryVote.value = {limit:10, mine:0, page:1}
    getVoteActivityData()
	} else if (v.index===1) {
		/*currLabel1.value = 0
		sActivityList.value = []
		querySign.value = {limit:10, mine:0, page:1}
		getSignActivityData()*/
    currLabel.value = 0
    activityList.value = []
    params.value = {content: "", limit: 10, page: 1, type: 0}
    getActivityList()
	} else {
    currLabel1.value = 0
    sActivityList.value = []
    querySign.value = {limit:10, mine:0, page:1}
    getSignActivityData()
	}
}

const currLabel = ref(0)
const handleLabel = (v) => {
	userLoginInfo.value = uni.getStorageSync("token");
	activityList.value = [];
	params.value.page = 1;
	params.value.type = v;
	currLabel.value = v
	if (v === 3) {
		/*if (!userLoginInfo.value) {

		  uni.navigateTo({
		  	url:'/package_login/pages/login/login'
		  })
		  currLabel.value = 0
		} else {*/
		  activityList.value = [];
		  customNav("../my-sign-up");
		// }
	}

	getActivityList()
}

const currLabel1 = ref(0)
const handleLabel1 = (v) => {
	sActivityList.value = []
	currLabel1.value = v
	querySign.value.mine = v
	getSignActivityData()
}

const currLabel2 = ref(0)
const handleLabel2 = (v) => {
	vActivityList.value = []
	currLabel2.value = v
	queryVote.value.mine = v
	getVoteActivityData()
}

// 生命周期
onLoad(() => {
	// getActivityList();
});
onShow(()=>{
	console.log('--------show---------',currTab.value)
	currTab.value
	if (currTab.value===0) {
    currLabel2.value = 0
    vActivityList.value = []
    queryVote.value = {limit:10, mine:0, page:1}
    getVoteActivityData()
	} else if (currTab.value===1) {
    currLabel.value = 0
    activityList.value = []
    params.value = {content: "", limit: 10, page: 1, type: 0}
    getActivityList()
	} else {
    currLabel1.value = 0
    sActivityList.value = []
    querySign.value = {limit:10, mine:0, page:1}
    getSignActivityData()
	}
	uni.setStorageSync("is_view_activity", '1')
})

const lookback = () => {
  customNav("./activity-lookback")
}
</script>

<style lang="less" scoped>
.box{
	width: 100vw;
	min-height: 100vh;
	background-color: #ffffff;
	display: flex;
	flex-direction: column;
	align-items: center;
	.head{
		margin-top: 10rpx;
		.tab{
			width: 680rpx;
			display: flex;
			.label{
				width: 175rpx;
				height: 100rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				.title{
					font-weight: bold;
					margin-bottom: 10rpx;
				}
				.line{
					width: 70rpx;
					border: 5rpx solid #00B689;
					// border-bottom: 5rpx solid #00B689;
					border-radius: 5rpx;
				}
			}
		}
		.search{
			width: 680rpx;
			background-color: #ffffff;
			border-radius: 35rpx;
			position: relative;
			box-shadow: 0 0 30rpx rgba(0,0,0,0.05);
			margin-top: 20rpx;
			.uni-input{
				height: 70rpx;
				border-radius: 50rpx;
				padding-left: 30rpx;
				border-radius: 35rpx;
				background-color: #F1F1F1;
				font-size: 28rpx;
			}
			.btn{
				width: 40rpx;
				height: 40rpx;
				position: absolute;
				right: 20rpx;
				top: 15rpx;
			}
		}
		.banner{
			margin-top: 30rpx;
			width: 680rpx;
			height: 210rpx;
			border-radius: 15rpx;
			image{
				width: 100%;
				height: 100%;
				border-radius: 15rpx;
			}
		}
	}
	.main{
		width: 680rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		.tab{
			margin-top: 30rpx;
			width: 680rpx;
			height: 50rpx;
			display: flex;
			border-radius: 30rpx;
			position: relative;
			.label{
				width: 170rpx;
				height: 50rpx;
				text-align: center;
				line-height: 50rpx;
				font-size: 28rpx;
				z-index:2;
				&.active{
					color: #ffffff;
					// font-size: 28rpx;
					// width: 170rpx;
					// background-color: #25AF89;
					// border-radius: 25rpx;
				}
			}
			.indicator{
				position: absolute;
				top: 0;
				width: 170rpx;
				height: 50rpx;
				background-color: #25AF89;
				border-radius: 25rpx;
				transition: 0.5s;
			}
		}
		.list{
			width: 680rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			padding-top: 10rpx;
			.item{
				position: relative;
				border-bottom: 1rpx solid #dddddd;
				padding-bottom: 20rpx;
				.cover{
					margin-top: 30rpx;
					width: 680rpx;
					height: 240rpx;
					image{
						width: 100%;height: 100%;border-radius: 15rpx;
					}
				}
				.title{
					margin-top: 20rpx;
					font-size: 36rpx;
					font-weight: bold;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2; /* 控制显示的行数 */
					-webkit-box-orient: vertical;
				}
				.time{
					margin-top: 10rpx;
					color: #686868;
					font-size: 24rpx;
				}
				.num{
					margin-top: 10rpx;
					color: #686868;
					font-size: 24rpx;
				}
				.addr{
					margin-top: 10rpx;
					color: #686868;
					font-size: 24rpx;
				}
				.btn{
					position: absolute;
					right: 0;
					bottom: 10rpx;
					width: 180rpx;
					height: 60rpx;
					background-color: #00B689;
					color: #ffffff;
					border-radius: 10rpx;
					line-height: 60rpx;
					text-align: center;
					font-size: 28rpx;
					&.btn1{
						background-color: #5691F5;
					}
					&.btn2{
						background-color:#DADADA;
					}
				}
			}
		}
		.tab_1{
			margin-top: 30rpx;
			width: 680rpx;
			height: 50rpx;
			display: flex;
			border-radius: 25rpx;
			position: relative;
			.label_1{
				width: 340rpx;
				height: 50rpx;
				text-align: center;
				line-height: 50rpx;
				font-size: 28rpx;
				z-index: 2;
				&.active{
					color: #ffffff;
					// font-size: 28rpx;
					// width: 360rpx;
					// background-color: #25AF89;
					// border-radius: 25rpx;
				}
			}
			.indicator_1{
				position: absolute;
				top: 0;
				width: 340rpx;
				height: 50rpx;
				background-color: #25AF89;
				border-radius: 25rpx;
				transition: 0.5s;
			}
		}
		.list_1{
			width: 680rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			margin-top: 30rpx;
			.item_1{
				width: 680rpx;
				height: 190rpx;
				display: flex;
				justify-content: space-between;
				background-color: #EFF1F5;
				padding-top: 20rpx;
				padding-left: 30rpx;
				border-radius: 20rpx;
				margin-bottom: 20rpx;
				.l{
					display: flex;
					flex-direction: column;
					.title{
						font-size: 36rpx;
						font-weight: bold;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 1; /* 控制显示的行数 */
						-webkit-box-orient: vertical;
					}
					.time{
						color: #969998;
						height: 40rpx;
						font-size: 32rpx;
						margin-top: 10rpx;
						display: flex;
						align-items: center;
						image{
							width: 40rpx;
							height: 40rpx;
							border-radius: 50%;
							margin-right: 10rpx;
						}
					}
					.btn{
						margin-top: 20rpx;
						width: 140rpx;
						height: 50rpx;
						background-color: #ffffff;
						color: #FA8E05;
						font-size: 30rpx;
						font-weight: bold;
						text-align: center;
						line-height: 50rpx;
						border-radius: 10rpx;
						&.bin{
							color: #5794F1;
						}
						&.bout{
							color: #969696;
						}
					}
				}
				.r{
					display: flex;
					justify-content: center;
					margin-right: 20rpx;
					image{
						width: 170rpx;
						height: 170rpx;
						border-radius: 15rpx;
					}
				}
			}
		}
	}

	.foot{
		width: 680rpx;
		height: 50rpx;
	}
}
</style>
